<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react practice</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
    var PRODUCTS = [
        {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
        {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
        {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
        {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
        {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
        {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
    ];
class SearchBar extends React.Component{
    constructor(props){
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.handleCheck = this.handleCheck.bind(this)
    }
    handleChange(e) {
        this.props.onFilterTextInput(e.target.value)
    }
    handleCheck (e) {
        this.props.onInStockInput(e.target.checked)
    }
    render(){
        return(
            <div>
                <input placeholder="Search..." value={this.props.filterText} onChange={this.handleChange}/>
                <br/>
                <label><input type="checkbox" value={this.props.inStockOnly} onChange={this.handleCheck}/>Only show products in stock</label>
            </div>
        )
    }
}
class ProductCategoryRow extends React.Component{
    render(){
        return(
                <tr><th>{this.props.category}</th></tr>
        )
    }
}
class ProductRow extends React.Component{
    render(){
        var name = this.props.product.stocked ? this.props.product.name : <span style={{color: 'red'}}>{this.props.product.name}</span>
        return(
            <tr>
                <td>{name}</td>
                <td>{this.props.product.price}</td>
            </tr>
        )
    }
}
class ProductTable extends React.Component{
    render(){
        var rows = []
        var lastCategory = null
        this.props.products.forEach((product) => {
            if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)){
                return
            }
            if(product.category !== lastCategory) {
                rows.push(
                    <ProductCategoryRow category={product.category} product={product} key={product.category}/>
                )
            }
            rows.push(<ProductRow product={product} key={product.name} />);
            lastCategory = product.category
        })
        return (
                <table>
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                    </tr>
                    </thead>
                    <tbody>{rows}</tbody>
                </table>
        )
    }
}
class FilterableProductTable extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            filterText: '',
            inStockOnly: false
        }
        this.handleFilterTextInput = this.handleFilterTextInput.bind(this)
        this.handleInStockInput = this.handleInStockInput.bind(this)
    }
    handleFilterTextInput(filterText) {
        this.setState({
            filterText: filterText
        })
    }

    handleInStockInput(inStockOnly) {
        this.setState({
            inStockOnly: inStockOnly
        })
    }
        render() {
            return (
                    <div>
                        <SearchBar onFilterTextInput={this.handleFilterTextInput} onInStockInput={this.handleInStockInput} filterText={this.state.filterText} inSockOnly={this.state.inStockOnly} />
                        <ProductTable products={this.props.products} filterText={this.state.filterText} inStockOnly={this.state.inStockOnly}/>
                    </div>
            )
        }
    }
function Repeat(props) {
    let items = [];
    for (let i = 0; i < props.numTimes; i++) {
        items.push(props.children(i));
    }
    return <div>{items}</div>;
}

function ListOfTenThings() {
    return (
            <Repeat numTimes={10}>
                {(index) => <div key={index}>This is item {index} in the list</div>}
            </Repeat>
    );
}
class RootApp extends React.Component{
    render () {
        return (
               <div>
                   <ListOfTenThings/>
                   <FilterableProductTable products={PRODUCTS}/>
                </div>
        )
    }
}
ReactDOM.render(<RootApp />, document.getElementById('app'))
</script>
</body>
</html>